<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
        }

        th {
            border: 1px solid black;
        }

        .a {
            background-color: aqua;
        }

        table {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <tr class="a">
            <th>
                <input type="checkbox" class="ckall">
                全选
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <th><input type="checkbox" class="ck"></th>
            <th>小米手机</th>
            <th>小米</th>
            <th>￥1999</th>
        </tr>
        <tr>
            <th><input type="checkbox" class="ck"></th>
            <th>小米净水器</th>
            <th>小米</th>
            <th>￥4999</th>
        </tr>
        <tr>
            <th><input type="checkbox" class="ck"></th>
            <th>小米电视</th>
            <th>小米</th>
            <th>￥5999</th>
        </tr>
        <script>
            const ckall = document.querySelector('.ckall')
            const ck = document.querySelectorAll('.ck')


            ckall.addEventListener('click', function () {
                for (let i = 0; i < ck.length; i++) {
                    ck[i].checked = ckall.checked
                }
            })

            for(let i = 0;i<ck.length;i++){
                ck[i].addEventListener('click',function(){
                    const ched = document.querySelectorAll('.ck:checked')
                    ckall.checked = cked.length === ck.length
                })
            }

        </script>

    </table>
</body>

</html>